<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<HTML>
<HEAD><TITLE>租房 - 首页</TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
    <LINK rel=stylesheet type=text/css href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/skin/laypage.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jQery-3.6.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/laypage.js"></script>
    <script src="${pageContext.request.contextPath}/js/layer/layer.js" charset="utf-8"></script>



</HEAD>
        <style>
            #mine{
                text-align: center;
                margin-top: 18px;
                padding: 2px;
                cursor: pointer;
            }
            #mine>input{
                color: white;
                font-size: 14px;
                border-style:none;
                background-color:#5e77aa;

            }
        </style>
<script>Vue.config.productionTip = false;</script>
<BODY>

<DIV id=header class=wrap>
    <DIV id=logo><IMG src="${pageContext.request.contextPath}/images/logo.gif"></DIV>
</DIV>
<DIV id="navbar" class=wrap>
    <DL class="search clearfix">
        <FORM id=sform method=post action=search.action>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=title>
                        <LABEL class=ui-blue>
                            <INPUT onclick=doSearch() value=搜索房屋 type=button  name=search>
                        </LABEL>
                    </LI>
                </UL>
            </DT>
            <DD>
                <UL>
                    <LI class=first>价格</LI>
                    <LI>
                        <SELECT name=price id="price">
                            <OPTION selected value="0">不限</OPTION>
                            <OPTION value="1">100元以下</OPTION>
                            <OPTION value="2">100元—200元</OPTION>
                            <OPTION value="3">200元以上</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房屋位置</LI>
                    <LI>
                        <SELECT id=street name=street_id>
                            <OPTION selected value="0">不限</OPTION>
                            <c:forEach items="${streetList}" var="street">
                                <option value="${street.streetId}">${street.streetName}</option>
                            </c:forEach>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI>
                        <SELECT name=type_id id="type">
                            <OPTION selected value="0">不限</OPTION>
                            <c:forEach items="${types}" var="type">
                                <option value="${type.typeId}">${type.typeName}</option>
                            </c:forEach>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>面积</LI>
                    <LI><SELECT name=floorage id="area">
                        <OPTION selected value="0">不限</OPTION>
                        <OPTION value="1">40以下</OPTION>
                        <OPTION value="2">40-500</OPTION>
                        <OPTION value="3">500以上</OPTION>
                    </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD id="mine">
                <LABEL class=ui-green><INPUT style="cursor: pointer" onclick='document.location="${pageContext.request.contextPath}/page/getByName.do?nickName=${nickName}"' value="个人中心" type=button name=search></LABEL>
            </DD>
        </FORM>
    </DL>
</DIV>
<DIV class="main wrap" id="app">
    <TABLE class=house-list>
        <TBODY>
            <TR v-for="(item,index) in result">
                <TD class=house-thumb><span><a  href="#"  @click ="detailE(item.id)">
                    <img src="${pageContext.request.contextPath}/images/thumb_house.gif" width="100" height="75" alt=""></a></span>
                </TD>
                <TD>
                    <DL>
                        <DT>
                            <a href="#" @click ="detailE(item.id)"  id="title">{{item.title}}</a>
                        </DT>
                        <DD id="district">{{item.district.districtName}}{{item.street.streetName}},<span id="area">{{item.area}}</span>平米<BR>联系方式：<span id="contact">{{item.contact}}</span>
                        </DD>
                    </DL>
                </TD>
                <TD class=house-type id="type">{{item.type.typeName}}</TD>
                <TD class=house-price><SPAN id="price">{{item.price}}</SPAN>元/月</TD>
            </TR>
        <TR>无租房信息</TR>
        </TBODY>
    </TABLE><br>
    <div align="center" class="pages" id="doctorDiv">
    </div>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>租房 © 2010 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>
    </DL>
</DIV>
</BODY>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                    result: []
            },
            methods:{
                detailE(id){
                    layer.open({
                        type: 2,
                        title: "房屋详情",
                        fix: false,
                        maxmin: true,
                        shadeClose: true,
                        area: ['90%', '90%'],
                        content: '/rent/page/detail.do?id=' + id,
                        end:function (){

                        }
                    });
                }
               /* detailE(id,e){
                    layer.open({
                        type: 2,
                        title: "房屋详情",
                        fix: false,
                        maxmin: true,
                        shadeClose: true,
                        area: ['960px', '520px'],
                        content: '/page/detail.do?id=' + id,
                        end:function (){

                        }
                    });
                }*/
            }
        });

        $(function () {
            search(1);
        });
        $('#street,#price,#area,#type').change(function (){
            let price = $('#price').val();
            let streetId = $('#street').val();
            let typeId = $('#type').val();
            let area = $('#area').val();
            if (price=="0" && streetId=="0"&&typeId=="0"&&area=="0"){
                search(1)
            }else {
                $.ajax({
                    type:"get",
                    url:"choose.do",
                    data:{
                        price:price,
                        streetId:streetId,
                        typeId:typeId,
                        area:area
                    },
                    success:function (data){
                        app.result="";
                        app.result=data;
                    }
                })
            }

        })
        function search(curr) {
            $.ajax({
                type: "get",
                url: "list.do",
                dataType: "json",
                data: {pageIndex:curr || 1},
                success: function (data) {
                   app.result=data.pageInfo.list;
                    laypage({
                        cont: 'doctorDiv',  //分页需要显示的地方
                        pages: data.pageInfo.pages,    //总页数
                        curr: data.pageInfo.pageNum,     //当前页
                        groups: 3,//连续显示分页数
                        skip: true,     //是否开启跳页
                        first: '首页',
                        last: '尾页',
                        skin: 'molv',   //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
                        prev: '<', //若不显示，设置false即可
                        next: '>', //若不显示，设置false即可
                        jump: function(e, first) {
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                search(e.curr); // (被单击的页码)
                            }
                        }
                    });
                }
            });
        }



    </script>

</HTML>

